<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="normalize.css">
    <link rel="stylesheet" href="app.css">
    <script defer src="byte-buffer.min.js"></script>
    <script defer src="sprite.js"></script>
    <script defer src="app.js"></script>
</head>
<body class="lobbying">
    <canvas id="title" width="475" height="137"></canvas>
    <div id="main">
        <div id="lobby">
            <section class="tab games">
                <input id="tab-games" class="input" type="radio" name="tab" checked>
                <label for="tab-games" class="label">Games</label>
                <div class="content"></div>
            </section>
            <section class="tab create">
                <input id="tab-create" class="input" type="radio" name="tab">
                <label for="tab-create" class="label">Create</label>
                <div class="content">
                    <div class="settings">
                        <div class="section">
                            <div class="title">Name</div>
                            <div class="input text">
                                <input id="create-name" class="validable" type="text" maxlength="32" placeholder="32 characters maximum" autocomplete="off" spellcheck="false" pattern="\S(.{0,30}\S)?" required>
                            </div>
                        </div>
                        <div class="section">
                            <div class="title">Grid</div>
                            <div class="input number">
                                <div class="label">Width:</div>
                                <input id="create-width" class="validable" type="number" min="16" max="255" value="60" placeholder="16 - 255" required>
                            </div>
                            <div class="input number">
                                <div class="label">Height:</div>
                                <input id="create-height" class="validable" type="number" min="16" max="255" value="33" placeholder="16 - 255" required>
                            </div>
                            <div class="input number">
                                <div class="label" title="Blocks per second">Speed:</div>
                                <input id="create-speed" class="validable" type="number" min="1" max="50" value="20" placeholder="1 - 50" required>
                            </div>
                        </div>
                        <div class="section">
                            <div class="title">Food</div>
                            <div class="input number">
                                <div class="label" title="Simultaneous foods">Count:</div>
                                <input id="create-foods" class="validable" type="number" min="1" max="32" value="1" placeholder="1 - 32" required>
                            </div>
                            <div class="input number">
                                <div class="label" title="Block growth per food">Strength:</div>
                                <input id="create-food-strength" class="validable" type="number" min="0" max="1024" value="4" placeholder="0 - 1024" required>
                            </div>
                        </div>
                        <div class="section">
                            <div class="title">Perks</div>
                            <table>
                                <tr>
                                    <td>
                                        <div class="input checkbox">
                                            <input id="create-reserved-food" type="checkbox" checked>
                                            <label for="create-reserved-food" class="label">Reserved Food</label>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="input checkbox">
                                            <input id="create-reverser" class="perk" type="checkbox" checked>
                                            <label for="create-reverser" class="label">Reverser</label>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="input checkbox">
                                            <input id="create-teleporter" class="perk" type="checkbox" checked>
                                            <label for="create-teleporter" class="label">Teleporter</label>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="input checkbox">
                                            <input id="create-speed-boost" class="perk" type="checkbox" checked>
                                            <label for="create-speed-boost" class="label">Speed boost</label>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="input checkbox">
                                            <input id="create-food-frenzy" class="perk" type="checkbox" checked>
                                            <label for="create-food-frenzy" class="label">Food frenzy</label>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="input checkbox">
                                            <input id="create-mines-trail" class="perk" type="checkbox" checked>
                                            <label for="create-mines-trail" class="label">Mines trail</label>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="input checkbox">
                                            <input id="create-multi-snake" class="perk" type="checkbox" checked>
                                            <label for="create-multi-snake" class="label">Multi-snake</label>
                                        </div>
                                    </td>
                                </tr>
                            </table>
                            <div class="spacing"></div>
                            <div id="create-perk-spacing-group" class="input number">
                                <div class="label" title="Number of foods eaten between perk spawns">Spawn rate:</div>
                                <input id="create-perk-spacing" class="validable" type="number" min="1" max="128" value="4" placeholder="1 - 128" required>
                            </div>
                            <div id="create-speed-boost-duration-group" class="input number">
                                <div class="label" title="Duration in number of blocks">Speed boost duration:</div>
                                <input id="create-speed-boost-duration" class="validable" type="number" min="5" max="1000" value="100" placeholder="5 - 1000" required>
                            </div>
                            <div id="create-food-frenzy-count-group" class="input number">
                                <div class="label" title="Number of foods to spawn">Food frenzy count:</div>
                                <input id="create-food-frenzy-count" class="validable" type="number" min="2" max="64" value="8" placeholder="2 - 64" required>
                            </div>
                            <div id="create-mines-trail-count-group" class="input number">
                                <div class="label" title="Number of mines to spawn">Mines trail count:</div>
                                <input id="create-mines-trail-count" class="validable" type="number" min="1" max="16" value="3" placeholder="1 - 16" required>
                            </div>
                        </div>
                    </div>
                    <div class="actions">
                        <div id="create-join" class="process disabled">Create</div>
                    </div>
                </div>
            </section>
            <section class="tab rules">
                <input id="tab-rules" class="input" type="radio" name="tab">
                <label for="tab-rules" class="label">Rules</label>
                <div class="content">
                    <div class="section">
                        <div class="title">Basics</div>
                        <div class="text">
                            <div class="paragraph">
                                <u>Cobrust</u> is a multi-player online Snake game. Pick-up food on the map to grow, dodge other player's snake and use perks to create plays!
                            </div>
                            <div class="paragraph">
                                Use the <u>create</u> tab to customize settings such as the size, speed or the strength of foods. Once created, other players will be able to join your game using the <u>games</u> tab.
                            </div>
                            <div class="paragraph">
                                Move your snake using the
                                <div class="key-group">
                                    <span class="key">W</span>
                                    <span class="key">A</span>
                                    <span class="key">S</span>
                                    <span class="key">D</span>
                                </div>
                                or the 
                                <div class="key-group">
                                    <span class="key">⇧</span>
                                    <span class="key">⇦</span>
                                    <span class="key">⇩</span>
                                    <span class="key">⇨</span>
                                </div>
                                keys of your keyboard.
                            </div>
                        </div>
                    </div>
                    <div class="section">
                        <div class="title">Perks</div>
                        <div class="perk">
                            <svg viewBox="0 0 100 100" class="color"> 
                                <circle cx="50" cy="50" r="50" fill="#2fbf71"></circle>
                            </svg>
                            <div class="info">Basic food, take it to grow.</div>
                        </div>
                        <div class="perk">
                            <svg viewBox="0 0 100 100" class="color"> 
                                <g transform="rotate(-60, 50, 50)">
                                    <path d="M 0 50 A 50 50 0 0 1 100 50 Z" fill="#1e90ff" />
                                    <path d="M 100 50 A 50 50 0 0 1 0 50 Z" fill="#0c3b66" />
                                </g>
                            </svg>
                            <div class="info">Reserved food, take two foods in a row to spawn it, extra growth but deniable.</div>
                        </div>
                        <div class="perk">
                            <svg viewBox="0 0 100 100" class="color"> 
                                <circle cx="50" cy="50" r="50" fill="#f0c808"></circle>
                            </svg>
                            <div class="info">Reverser, take it to swap your head and tail.</div>
                        </div>
                        <div class="perk">
                            <svg viewBox="0 0 100 100" class="color"> 
                                <circle cx="50" cy="50" r="50" fill="#e7820e"></circle>
                            </svg>
                            <div class="info">Teleporter, take it to teleport to the other gate.</div>
                        </div>
                        <div class="perk">
                            <svg viewBox="0 0 100 100" class="color"> 
                                <circle cx="50" cy="50" r="50" fill="#e70ed9"></circle>
                            </svg>
                            <div class="info">Speed boost, take it to temporary double your speed.</div>
                        </div>
                        <div class="perk">
                            <svg viewBox="0 0 100 100" class="color"> 
                                <circle cx="50" cy="50" r="50" fill="#9e59ff"></circle>
                            </svg>
                            <div class="info">Food frenzy, take it to spawn a ton of foods.</div>
                        </div>
                        <div class="perk">
                            <svg viewBox="0 0 100 100" class="color"> 
                                <g transform="rotate(30, 50, 50)">
                                    <path d="M 0 50 A 50 50 0 0 1 75 6.6987298108 L 50 50 Z" fill="#e06565" />
                                    <path d="M 75 6.6987298108 A 50 50 0 0 1 75 93.3012701892 L 50 50 Z" fill="#6b0000" />
                                    <path d="M 75 93.3012701892 A 50 50 0 0 1 0 50 L 50 50 Z" fill="#f00000" />
                                </g>
                            </svg>
                            <div class="info">Mines trail, take it to leave mines on your passage.</div>
                        </div>
                        <div class="perk">
                            <svg viewBox="0 0 100 100" class="color"> 
                                <circle cx="50" cy="50" r="50" fill="#5eeaf7"></circle>
                            </svg>
                            <div class="info">Multi-snake, take it to duplicate yourself.</div>
                        </div>
                    </div>
                    <div class="section">
                        <div class="title">Tips</div>
                        <div class="text">- While in the lobby, <u>double-click</u> a game to join.</div>
                        <div class="text">- Press <span class="key">C</span> to change color.</div>
                        <div class="text">- Some perks apply to all your bodies when eaten.</div>
                    </div>
                </div>
            </section>
        </div>
        <div id="game"></div>
    </div>
</body>
</html>